<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/css/bootstrap-table.css">
<link rel="stylesheet" href="../assets/css/sweetalert.css">
<link rel="stylesheet" href="../assets/css/bootstrapValidator.min.css">
<script src="../assets/js/jquery-2.1.4.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../assets/js/bootstrap-table.js"></script>
<script src="../assets/js/bootstrap-table-export.js"></script>
<script src="../assets/js/bootstrapValidator.min.js"></script>
<script src="http://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
<script src="../assets/js/bootstrap-table-zh-CN.js"></script>
<script src="../assets/js/sweetalert.min.js"></script>
<title>员工管理</title>
<style>
    .btn-default {
        height: 34px
    }

    .form-control {
        height: 30px
    }
</style>
<div class="container" style="width:90%; height: auto">
    <h1>员工管理</h1>
    <form class="form-inline" id="searchForm" style="padding:2px 5px">
        <div class="form-group">
            <label>工号:</label>
            <input class="form-control" type="text" id="searchCode" name="code">
        </div>
        &#12288;
        <div class="form-group">
            <label>姓名:</label>
            <input class="form-control" type="text" id="searchName" name="name">
        </div>
        &#12288;
        <div class="form-group">
            <label>性别:</label>
            <select class="form-control" name="sex" id="searchSex" style="width: 196px">
                <option value="">所有</option>
                <option value="1">男</option>
                <option value="2">女</option>
            </select>
        </div>
        &#12288;
        <br>
        <div class="form-group" style="padding: 4px 0 4px 0;">
            <label>部门:</label>
            <select class="form-control" id="searchDepartmentId" name="departmentId" style="width: 196px">
                <option value="">所有</option>
                <!--<option value="1">行政部</option>
                <option value="2">财务部</option>
                <option value="3">开发部</option>-->
            </select>
        </div>
        &#12288;
        <div class="form-group">
            <label>职位:</label>
            <select class="form-control" id="searchLevel" name="level" style="width: 196px">
                <option value="">所有</option>
                <option value="1">普通员工</option>
                <option value="2">部门经理</option>
                <option value="3">总经理</option>
            </select>
        </div>
        &#12288;
        <button type="button" class="btn btn-primary" onclick="searchEmployee()"
                style="height: 30px;vertical-align: middle"><i class="glyphicon glyphicon-search"></i> 搜索
        </button>
    </form>
    <hr>
    <div id="toolbar">
        <button id="add" class="btn btn-primary" data-toggle="modal" data-target="#addModal">
            <i class="glyphicon glyphicon-plus"></i> 添加
        </button>
        <button id="remove" class="btn btn-danger" onclick="removeEmployee()">
            <i class="glyphicon glyphicon-remove"></i> 删除
        </button>
    </div>
    <table id="table" class="table-responsive"
           data-toolbar="#toolbar"
           data-search="false"
           data-show-refresh="true"
           data-show-toggle="true"
           data-show-export="true"
           data-minimum-count-columns="2"
           data-pagination="true"
           data-unique-id="id"
           data-page-number="1"
           data-page-size="10"
           data-page-list="[10, 20, 30, 40]"
           data-pagination-pre-text="上一页"
           data-pagination-next-text="下一页"
           data-show-footer="false"
           data-side-pagination="server"
           data-valign="middle"
           data-url="/employee/"
           data-query-params="queryParams"
           data-response-handler="responseHandler">
    </table>
</div>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">添加员工</h4>
            </div>
            <div class="modal-body" style="text-align: center">
                <form class="form-horizontal" id="addEmployeeForm" role="form">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">工号:</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" name="code">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">姓名:</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" name="name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别:</label>
                        <div class="col-sm-6">
                            <select class="form-control" name="sex">
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">密码:</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" name="password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">邮箱:</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="email" name="email">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">部门:</label>
                        <div class="col-sm-6">
                            <select class="form-control" id="addDepartmentId" name="departmentId">
                                <option value="">无</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">职位:</label>
                        <div class="col-sm-6">
                            <select class="form-control" name="level">
                                <option value="1">普通员工</option>
                                <option value="2">部门经理</option>
                                <option value="3">总经理</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="submit" class="btn btn-primary" onclick="saveEmployee()">保存</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="">编辑员工</h4>
            </div>
            <div class="modal-body" style="text-align: center">
                <form class="form-horizontal" id="editForm" role="form">
                    <input type="hidden" name="_method" value="put"/>
                    <div class="form-group" hidden>
                        <label class="col-sm-2 control-label">编号:</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" id="editId" name="id">
                        </div>
                    </div>
                    <div class="form-group" hidden>
                        <label class="col-sm-2 control-label">工号:</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" id="editCode" name="code">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">姓名:</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" id="editName" name="name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别:</label>
                        <div class="col-sm-6">
                            <select class="form-control" id="editSex" name="sex">
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">密码:</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" id="editPassword" name="password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">邮箱:</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" id="editEmail" name="email">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">部门:</label>
                        <div class="col-sm-6">
                            <select class="form-control" id="editDepartmentId" name="departmentId">
                                <option value="">无</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">职位:</label>
                        <div class="col-sm-6">
                            <select class="form-control" id="editLevel" name="level">
                                <option value="1">普通员工</option>
                                <option value="2">部门经理</option>
                                <option value="3">总经理</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="submit" name="submit" class="btn btn-primary" onclick="updateEmployee()">保存</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $.ajax({
            url: "/department/",
            type: 'get',
            data: {pageSize: 10},
            async: false,
            success: function (result) {
                if (result.success) {
                    var departmentList = result.department.list;
                    for(var i=0;i<departmentList.length;i++){
                        $("#searchDepartmentId").append("<option value='" + departmentList[i].id + "'>" + departmentList[i].name + "</option>");
                        $("#addDepartmentId").append("<option value='" + departmentList[i].id + "'>" + departmentList[i].name + "</option>");
                        $("#editDepartmentId").append("<option value='" + departmentList[i].id + "'>" + departmentList[i].name + "</option>");
                    }
                }
            }
        });
        //清除弹窗原数据
        formValidator();
        $("#addModal").on("hidden.bs.modal", function () {
            document.getElementById("addEmployeeForm").reset();
            $("#addEmployeeForm").data('bootstrapValidator').destroy();
            $('#addEmployeeForm').data('bootstrapValidator', null);
            formValidator();
        });
        $("#editModal").on("hidden.bs.modal", function () {
            document.getElementById("editForm").reset();
            $("#editForm").data('bootstrapValidator').destroy();
            $('#editForm').data('bootstrapValidator', null);
            formValidator();
        });
        $("#table").bootstrapTable({
            height: 600,   //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            showColumns: true, //显示隐藏列
            striped: true,
            columns: [
                {
                    field: 'state',
                    checkbox: true,
                    align: 'center',
                    valign: 'middle'
                }, {
                    title: '工号',
                    field: 'code',
                    align: 'center',
                    valign: 'middle'
                }, {
                    title: '姓名',
                    field: 'name',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '性别',
                    field: 'sex',
                    align: 'center',
                    valign: 'middle',
                    formatter: sexFormatter
                }, {
                    title: '密码',
                    field: 'password',
                    align: 'center',
                    valign: 'middle'
                }, {
                    title: '邮箱',
                    field: 'email',
                    align: 'center',
                    valign: 'middle'
                }, {
                    title: '部门',
                    field: 'departmentName',
                    align: 'center',
                    valign: 'middle'
                }, {
                    title: '职位',
                    field: 'level',
                    align: 'center',
                    valign: 'middle',
                    formatter: levelFormatter
                },
                {
                    title: '操作',
                    field: 'operate',
                    align: 'center',
                    valign: 'middle',
                    formatter: operateFormatter
                }
            ]
        });
    });

    function queryParams(params) {
        return {
            pageSize: params.limit,
            pageNumber: $('#table').bootstrapTable('getOptions').pageNumber,
            sort: params.sortName,
            order: params.sortOrder,
            code: $("#searchCode").val(),
            name: $("#searchName").val(),
            sex: $("#searchSex option:selected").val(),
            departmentId: $("#searchDepartmentId option:selected").val(),
            level: $("#searchLevel option:selected").val()
        };
    }
    function responseHandler(res) {
        return {
            "rows": res.employee.list,
            "total": res.employee.total
        }
    }
    function operateFormatter(value, row, index) {
        return [
            '<button id="edit" class="btn btn-success" onclick="edit(' + row.id + ')"><i class="glyphicon glyphicon-edit"></i> 修改</button>'
        ].join('');
    }
    function sexFormatter(value, row, index) {
        if (value == 1)
            return "男";
        else
            return "女";
    }
    function levelFormatter(value, row, index) {
        if (value == 1)
            return "普通员工";
        else if (value == 2)
            return "部门经理";
        else if (value == 3)
            return "总经理";
        else
            return "管理员"
    }
    function edit(id) {
        var row = $("#table").bootstrapTable("getRowByUniqueId", id);
        $('#editModal').modal('show');
        $("#editId").val(row.id);
        $("#editCode").val(row.code);
        $("#editName").val(row.name);
        $("#editSex").val(row.sex);
        $("#editPassword").val(row.password);
        $("#editDepartmentId").val(row.departmentId);
        $("#editLevel").val(row.level);
        $("#editEmail").val(row.email);
    }
    function searchEmployee() {
        $("#table").bootstrapTable('refresh');
    }
    function saveEmployee() {
        //开启验证
        $('#addEmployeeForm').data('bootstrapValidator').validate();
        if (!$('#addEmployeeForm').data('bootstrapValidator').isValid()) {
            return;
        }
        $.ajax({
            url: "/employee/",
            type: 'POST',
            data: $("#addEmployeeForm").serialize(),
            async: false,
            success: function (result) {
                if (result.success) {
                    $("#addModal").modal('hide');
                    swal("Good job!", "添加成功", "success");
                    searchEmployee();
                } else {
                    sweetAlert("Oops...", result.message, "error");
                }
            },
            error: function (result) {
                sweetAlert("Oops...", "添加失败", "error");
            }
        });
    }

    function updateEmployee() {
        //开启验证
        $('#editForm').data('bootstrapValidator').validate();
        if (!$('#editForm').data('bootstrapValidator').isValid()) {
            return;
        }
        $.ajax({
            url: "/employee/",
            type: 'POST',
            data: $("#editForm").serialize(),
            async: false,
            success: function (result) {
                if (result.success) {
                    $("#editModal").modal('hide');
                    swal("Good job!", "修改成功", "success");
                    searchEmployee();
                } else {
                    sweetAlert("Oops...", result.message, "error");
                }
            },
            error: function (result) {
                sweetAlert("Oops...", "更新失败", "error");
            }
        });
    }

    function removeEmployee() {
        var selections = $("#table").bootstrapTable("getSelections");
        if (selections.length > 0) {
            swal({
                        title: "Are you sure?",
                        text: "是否要删除所选记录!",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "是",
                        cancelButtonText: "否",
                        closeOnConfirm: false
                    },
                    function () {
                        var strid = "";
                        for (var i = 0; i < selections.length; i++) {
                            strid += selections[i].id + ","
                        }
                        $.ajax({
                            url: "/employee/"+strid,
                            type: 'DELETE',
                            async: false,
                            success: function (result) {
                                if (result.success) {
                                    swal("Deleted!", "删除成功.", "success");
                                    searchEmployee();
                                } else {
                                    sweetAlert("Oops...", result.message, "error");
                                }
                            },
                            error: function (result) {
                                sweetAlert("Oops...", "删除失败", "error");
                            }
                        });
                    });
        }
        else {
            sweetAlert("Oops...", "请选择员工", "error");
        }

    }
    function formValidator() {
        $('#addEmployeeForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                code: {
                    message: '工号验证失败',
                    validators: {
                        notEmpty: {
                            message: '工号不能为空'
                        },
                        regexp: {
                            regexp: /^[0-9]*$/,
                            message: '工号只能包含数字'
                        }
                    }
                },
                name: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength: {
                            min: 2,
                            max: 4,
                            message: '用户名长度必须在2到4位之间'
                        }
                    }
                },
                password: {
                    message: '密码验证失败',
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '密码长度必须在6到18位之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '密码只能包含大写、小写、数字和下划线'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱不能为空'
                        },
                        emailAddress: {
                            message: '邮箱地址格式有误'
                        }
                    }
                }
            },
            submitHandler: function (validator, form, submitButton) {
            }
        });
        $('#editForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                code: {
                    message: '工号验证失败',
                    validators: {
                        notEmpty: {
                            message: '工号不能为空'
                        },
                        regexp: {
                            regexp: /^[0-9]*$/,
                            message: '工号只能包含数字'
                        }
                    }
                },
                name: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength: {
                            min: 2,
                            max: 4,
                            message: '用户名长度必须在2到4位之间'
                        }
                    }
                },
                password: {
                    message: '密码验证失败',
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '密码长度必须在6到18位之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '密码只能包含大写、小写、数字和下划线'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱不能为空'
                        },
                        emailAddress: {
                            message: '邮箱地址格式有误'
                        }
                    }
                }
            },
            submitHandler: function (validator, form, submitButton) {
            }
        });
    }
</script>